<template>
    <div class="chart-wrapper">
        <div v-loading="loading" class="chart" ref="chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { debounce } from '@/utils'

export default {
    name: 'VisitChart',
    props: {
        data: {
            type: Array,
            default: () => []
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
        data: {
            deep: true,
            handler(val) {
                this.setOptions(val)
            }
        }
    },
    mounted() {
        this.initChart()
        this.__resizeHandler = debounce(() => {
            if (this.chart) {
                this.chart.resize()
            }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        window.removeEventListener('resize', this.__resizeHandler)
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart)
            this.setOptions(this.data)
        },
        setOptions(data) {
            const dates = data.map(item => item.date)
            const values = data.map(item => item.value)

            this.chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dates,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '访问量',
                    type: 'line',
                    smooth: true,
                    data: values,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(58,77,233,0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(58,77,233,0.1)'
                            }
                        ])
                    },
                    itemStyle: {
                        color: '#3A4DE9'
                    }
                }]
            })
        }
    }
}
</script>

<style scoped>
.chart-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.chart {
    width: 100%;
    height: 100%;
}
</style> 